<template>
  <div class="title">
    <div class="box">
      <div class="header">
        统计截至:
        <span>{{lastUpdateTime}}</span>
      </div>
    </div>
    
    <div class="row1">
      <div class="col1">
        <div>较昨日<span v-show="localConfirmH5>=0">+</span>
        <span>{{localConfirmH5}}</span></div>
        <div>{{ localConfirm }}</div>
        <div>本土现有确诊</div>
      </div>
      <div class="col2">
         <div>较昨日<span v-show="oldNowconfirm>=0">+</span>
           <span>{{oldNowconfirm}}</span></div>
        <div>{{ nowConfirm }}</div>
        <div>现有确诊</div>
      </div>
      <div class="col3">
         <div>较昨日<span v-show="oldConfirm>=0">+</span>
           <span>{{oldConfirm}}</span></div>
        <div>{{ confirm }}</div>
        <div>累计确诊</div>
      </div>
    </div>
    <div class="row2">
      <div class="col4">
         <div>较昨日<span v-show="oldNoInfect>=0">+</span>
           <span>{{oldNoInfect}}</span></div>
        <div>{{ noInfect }}</div>
        <div>无症状感染者</div>
      </div>
      <div class="col5">
         <div>较昨日<span v-show="oldImportedCase>=0">+</span>
           <span>{{oldImportedCase}}</span></div>
        <div>{{ importedCase }}</div>
        <div>境外输入</div>
      </div>
      <div class="col6">
         <div>较昨日<span v-show="oldDead>=0">+</span>
           <span>{{oldDead}}</span></div>
        <div>{{ dead }}</div>
        <div>累计死亡</div>
      </div>
    </div>
  </div>
</template>
<script>
import jsonp from "jsonp";
export default {
  data() {
    return {
      activeName: "a",
      confirm: "",
      dead: "",
      localConfirm: "",
      nowConfirm: "",
      noInfect: "",
      importedCase: "",
      lastUpdateTime:'',
      
      localConfirmH5:'',
      oldConfirm:'',
      oldNowconfirm:'',
      oldNoInfect:'',
      oldImportedCase:'',
      oldDead:'',
      
    };
  },
  mounted() {
    this.getData();
   
  },
  methods: {
    getData() {
      //从新浪取到json数据
      jsonp(
        //  `https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=${yqTime}`,
          `https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5`,
            // `https://view.inews.qq.com/g2/getOnsInfo?name=disease_other`,
        {},
        (err, res) => {
          if (!err) {
            console.log(res);
            //  console.log(res.data);
            var arr = res.data;
            arr = JSON.parse(arr);
            console.log(arr);
            let chinaTotal = arr.chinaTotal;
            // 累计增长
            let chinaAdd = arr.chinaAdd;
            // 较昨日本土现有确诊增加
            let localConfirmH5 = chinaAdd.localConfirmH5
            this.localConfirmH5 = localConfirmH5;
            // 较昨日现有确诊增加
            let oldNowconfirm = chinaAdd.nowConfirm;
            this.oldNowconfirm = oldNowconfirm;
            // 较昨日累计确诊增加
            let oldConfirm = chinaAdd.confirm;
            this.oldConfirm = oldConfirm;
            // 较昨日无症状感染者增加
            let oldNoInfect = chinaAdd.noInfect;
            this.oldNoInfect = oldNoInfect;
            // 较昨日境外输入增加
            let oldImportedCase = chinaAdd.importedCase;
            this.oldImportedCase = oldImportedCase;
            // 较昨日累计死亡增加
            let oldDead = chinaAdd.dead;
            this.oldDead = oldDead;
          
          
            //  累计确诊
            let confirm = chinaTotal.confirm;
            this.confirm = confirm;
            // 累计死亡
            let dead = chinaTotal.dead;
            this.dead = dead;
            // 本土现有确诊
            let localConfirm = chinaTotal.localConfirm;
            this.localConfirm = localConfirm;
            // 现有确诊
            let nowConfirm = chinaTotal.nowConfirm;
            this.nowConfirm = nowConfirm;
            // 无症状感染者
            let noInfect = chinaTotal.noInfect;
            this.noInfect = noInfect;
            // 境外输入
            let importedCase = chinaTotal.importedCase;
            this.importedCase = importedCase;
            // 上一次更新时间
            let lastUpdateTime = arr.lastUpdateTime;
            this.lastUpdateTime = lastUpdateTime;
           
           
          }
        }
      );
    },
  },
};
</script>
<style scoped>
.col1 {
  width: 32%;
  height: 3rem;
  text-align: center;
  display: inline-block;
  background-color: rgba(238, 197, 72, 0.3);
}
.col1 div:nth-child(1) {
  font-size:0.5rem;
}
.col1 div:nth-child(1) span{
 color: rgb(199, 119, 58);
}
.col1 div:nth-child(2) {
  font-size: 0.75rem;
  color: rgb(199, 119, 58);
}
.col1 div:nth-child(3) {
  font-size: 0.55rem;
}
.col2 {
  width: 32%;
  height: 3rem;
  margin-left: 1%;
  margin-right: 1%;
  display: inline-block;
  background-color: rgba(232, 184, 181, 0.3);
}
.col2 div:nth-child(1) {
  font-size:0.5rem;
}
.col2 div:nth-child(1) span{
  color: rgb(195, 45, 47);
}
.col2 div:nth-child(2) {
  font-size: 0.75rem;
  color: rgb(195, 45, 47);
}
.col2 div:nth-child(3) {
  font-size: 0.55rem;
}
.col3 {
  width: 32%;
  height: 3rem;
  display: inline-block;
  background-color: rgba(242, 158, 152, 0.3);
}
.col3 div:nth-child(1) {
  font-size:0.5rem;
}
.col3 div:nth-child(1) span{
  color: rgb(168, 48, 50);
}
.col3 div:nth-child(2) {

  font-size: 0.75rem;
  color: rgb(168, 48, 50);
}
.col3 div:nth-child(3) {
  font-size: 0.55rem;
}
.col4 {
  width: 32%;
  height: 3rem;
  display: inline-block;
  background-color: rgba(200, 192, 232, 0.3);
}
.col4 div:nth-child(1) {
  font-size:0.5rem;
}
.col4 div:nth-child(1) span{
  color: rgb(164, 71, 177);
}
.col4 div:nth-child(2) {
  font-size: 0.75rem;
  color: rgb(164, 71, 177);
}
.col4 div:nth-child(3) {
  font-size: 0.55rem;
}
.col5 {
  width: 32%;
  height: 3rem;
  margin-left: 1%;
  margin-right: 1%;
  display: inline-block;
  background-color: rgba(180, 202, 226, 0.3);
}
.col5 div:nth-child(1) {
  font-size:0.5rem;
}
.col5 div:nth-child(1) span{
  color: rgb(93, 141, 207);
}
.col5 div:nth-child(2) {
  font-size: 0.75rem;
  color: rgb(93, 141, 207);
}
.col5 div:nth-child(3) {
  font-size: 0.55rem;
}
.col6 {
  width: 32%;
  height: 3rem;
  display: inline-block;
  background-color: rgba(172, 176, 181, 0.3);
}
.col6 div:nth-child(1) {
  font-size:0.5rem;
}
.col6 div:nth-child(1) span{
  color: rgb(78, 79, 84);
}
.col6 div:nth-child(2) {
  font-size: 0.75rem;
  color: rgb(78, 79, 84);
}
.col6 div:nth-child(3) {
  font-size: 0.55rem;
}
.row1,
.row2 {
  margin-left: 0.1rem;
  /* margin-right: -2px; */
  display: block;
  text-align: center;
  line-height: 1rem;
}
.row2 {
  margin-top: 0.1rem;
}
.header {
  font-size: 0.5rem;
}
.header span:nth-child(1) {
  font-weight: 600;
}

.box {
  margin-left: 0.3rem;
  text-align: left;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.title{
   border: 1px solid #bbb;
 border-radius: 10px;
}
</style>
